<template>
    <div >
        <div style="margin: 20px ;">
            <div style="margin: 20px 10px">
                <el-button type="primary" style="margin: 0 10px" @click="add">新增</el-button>
                <el-input v-model="search " style="width: 20%" clearable placeholder="请输入名称查询"></el-input>
                <el-button type="primary" style="margin: 0 10px" @click="load">查询</el-button>
            </div>
            <el-table :data="tableData" stripe style="width: 100%"  tooltip-effect="dark">
                <el-table-column prop="id" label="ID" sortable align="center"></el-table-column>
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="weight" label="重量" align="center"></el-table-column>
                <el-table-column prop="bookId" label="书本id" align="center"></el-table-column>
                <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete( scope.row.id)">
                            <template #reference>
                                <el-button type="text" style="color: #ff4268">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 20px 10px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"></el-pagination>
            </div>
            <!--弹窗-->
            <el-dialog title="用户信息" v-model="dialogVisible" width="70%">
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">

                    <el-form-item label="书本" prop="bookId">
                        <el-select v-model="form.bookId"
                                   style="width:80%"
                                   popper-class="eloption" :popper-append-to-body="true">
                            <el-option v-for="b in books" :key="b.id" :label="b.name" :value="b.id">
                                <span style="float: left">{{ b.name }} </span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="章节" prop="name">
                        <el-input v-model="form.name" style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="排序" prop="weight">
                        <el-input v-model="form.weight" type='number' maxLength=5 style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="内容">
                        <div>
                            <div id="div1" style="width: 660px;height: 400px">
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label=" " >
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save()">确 定</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

        </div>
    </div>

</template>

<script>
    import request from "../../utils/request";
    import E from "wangeditor"
    let editor;

    export default {
        name: 'chapter',
        components: {},
        created() {
            this.load()
        },
        methods: {
            fileUploadSuccess(res) {
                this.form.cover = res.data
            },
            load() {
                this.form = {}
                this.rules.weight = ''
                this.rules.naem = ''
                request.get("/chapter", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })

            },
            add() {
                this.dialogVisible = true
                this.getAllBook()
                this.form = {}
                this.$nextTick(() => {
                    // 关联弹窗里面的div，new一个 editor对象
                    if (!editor) {
                        editor = new E('#div1')
                        editor.create()
                    }
                    editor.txt.html("")
                })
            },

            getAllBook() {
                request.get("book/getUserAllBook").then(res => {
                    console.log(res)
                    this.books = res.data
                })
            },

            save() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.id) {
                            this.form.content = editor.txt.html();
                            console.log(this.form)
                            request.put("/chapter", this.form).then(res => {
                                if (res.code == "0") {
                                    this.$message({
                                        type: "success",
                                        message: "更新成功！"
                                    })
                                    this.dialogVisible = false
                                    this.load()
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: res.msg
                                    })
                                }
                            })
                        } else {
                            this.form.content = editor.txt.html();
                            console.log(this.form)
                            request.post("/chapter", this.form).then(res => {
                                if (res.code == "0") {
                                    this.$message({
                                        type: "success",
                                        message: "新增成功！"
                                    })
                                    this.dialogVisible = false
                                    this.load()
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: "新增失败！"
                                    })
                                }
                            })
                        }
                    }
                })

            },

            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true

                this.$nextTick(() => {
                    if (!editor) {
                        editor = new E('#div1')
                        editor.create()
                    }

                    editor.txt.html(row.content)
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load();
            },

            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },

            handleDelete(id) {
                request.delete("/chapter/" + id).then(res => {
                    if (res.code == "0") {
                        this.$message({
                            type: "success",
                            message: "删除成功！"
                        })
                        this.dialogVisible = false
                        this.load()
                    } else {
                        this.$message({
                            type: "error",
                            message: "删除失败！"
                        })
                    }
                })
            }
        },

        data() {
            return {
                search: '',
                form: {},
                rules: {
                    weight: [{required: true,  message: '请输入', trigger: 'blur'},],
                    name: [{required: true, message: '请输入', trigger: 'blur'},],
                    bookId: [{required: true, message: '请选择书本', trigger: 'blur'},],
                },
                books: {},
                dialogVisible: false,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: []

            }
        },
    }
</script>

<style>
    .myStyle{
        width:100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

</style>